<template>
  <div class="app-container">
    <el-card>
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入产品名称"></el-input>
        </el-form-item>

        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="授信金额：">
          <div style="display: flex">
            <el-input type="number" :min="0" style="width: 130px" v-model="searchForm.creditMoneyStart"
              placeholder="请输入"></el-input>
            <div style="margin: 0 10px">-</div>
            <el-input style="width: 130px" :min="0" type="number" v-model="searchForm.creditMoneyEnd"
              placeholder="请输入"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="放款金额：">
          <div style="display: flex">
            <el-input type="number" :min="0" style="width: 130px" v-model="searchForm.loanMoneyStart"
              placeholder="请输入"></el-input>
            <div style="margin: 0 10px">-</div>
            <el-input style="width: 130px" :min="0" type="number" v-model="searchForm.loanMoneyEnd"
              placeholder="请输入"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="所属渠道">
          <el-select v-model="searchForm.channelId" placeholder="请选择所属渠道  " clearable>
            <el-option v-for="item in product_channelList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单进度">
          <el-select v-model="searchForm.state" clearable placeholder="请选择订单进度">
            <el-option v-for="item in stateList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间" prop="beginTime">
          <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleSearchList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="listLoading" :data="tableData.list" border size="small">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="产品名称" align="center">
          <template slot-scope="scope">
            <router-link :to="{ path: '/productDetail', query: { id: scope.row.id } }, ">
              <div>
                <el-button type="text" size="small" @click="detail(scope.row)">{{ scope.row.productName ?
                  scope.row.productName : "-" }}</el-button>

              </div>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="客户信息" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.name ? scope.row.name : "-" }}
            </div>
            <div>
              {{ scope.row.companyName ? scope.row.companyName : "-" }}
            </div>
            <div>
              {{ scope.row.phone ? scope.row.phone : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属渠道" align="center" prop="channelId">
        </el-table-column>
        <el-table-column label="订单编号" align="center" prop="orderNo">
        </el-table-column>
        <el-table-column label="申请金额(元)" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.applyAmount ? scope.row.applyAmount : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="授信金额(元)" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.creditMoney ? scope.row.creditMoney : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="放款金额(元)" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.loanMoney ? scope.row.loanMoney : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="订单进度" align="center" prop="state">
        </el-table-column>
        <el-table-column label="下单时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="审批状态" align="center" prop="ksrState">
          <template slot-scope="scope">
            <span>{{ scope.row.ksrState ? scope.row.ksrState : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属客户经理" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.accountManagerName">
              {{ scope.row.accountManagerName }}
            </div>
            <el-button v-if="scope.row.state != '订单取消'" icon="el-icon-edit" type="text" size="small"
              @click="editAccountManager(scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column label="结算金额(元)" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.money ? scope.row.money : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="返佣金额(元)" align="center">
          <template slot-scope="scope">
            <!--            <span v-if="scope.row.state == '放款成功'">-->
            <!--              <el-input placeholder="请输入返佣金额" size="mini"></el-input>-->
            <!--            </span>-->
            <span>-</span>
          </template>
        </el-table-column>
        <el-table-column label="返佣状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.ksrSettleState">
              {{ scope.row.ksrSettleState }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="预计返佣时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | timeFilter }} </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
            <el-button type="text" size="small" v-if="scope.row.state != '订单取消'"
              @click="customerMsg(scope.row)">客户信息</el-button>
            <el-button type="text" size="small" @click="handleReport(scope.row)">操作记录</el-button>
            <el-button type="text" v-if="!scope.row.channelOrderNo && scope.row.state != '订单取消'" size="small"
              @click="handleOrder(scope.row)">推送第三方</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.pageSize" :total="tableData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </el-card>
    <detail ref="detail"></detail>
    <customerDetail @getList="getList" ref="customerDetail"></customerDetail>
    <stepDetail ref="stepDetail"></stepDetail>
    <editManager @getList="getList" ref="editManager"></editManager>
  </div>
</template>
<script>
import { getkeyikeList } from "@/api/incomingManagement";
import detail from "./components/detail";
import customerDetail from "./components/customerDetail.vue";
import stepDetail from "./components/stepDetail.vue";
import editManager from "./components/editManager.vue";
import { getkeyikeOrder } from "../../../api/incomingManagement";

export default {
  name: "index",
  components: {
    detail,
    customerDetail,
    stepDetail,
    editManager,
  },
  watch: {
    searchTime: {
      handler(val) {
        if (val) {
          this.searchForm.createTimeStart = val[0];
          this.searchForm.createTimeEnd = val[1];
        } else {
          this.searchForm.createTimeStart = "";
          this.searchForm.createTimeEnd = "";
        }
      },
    },
  },
  filters: {
    timeFilter(time) {
      const initialDate = new Date(time);
      const oneMonthLater = new Date(initialDate);
      oneMonthLater.setMonth(initialDate.getMonth() + 1);
      const year = oneMonthLater.getFullYear();
      const month = String(oneMonthLater.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
      const day = String(oneMonthLater.getDate()).padStart(2, "0");
      const hours = String(oneMonthLater.getHours()).padStart(2, "0");
      const minutes = String(oneMonthLater.getMinutes()).padStart(2, "0");
      const seconds = String(oneMonthLater.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  data() {
    return {
      searchTime: null,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        createTimeStart: "",
        createTimeEnd: "",
      },
      tableData: {
        total: 0,
        list: [],
      },
      listLoading: false,
      product_channelList: [],
      stateList: [
        "已提交",
        "申请中",
        "审批中",
        "审批拒绝",
        "授信成功",
        "放款失败",
        "放款成功",
      ],
    };
  },
  async created() {
    this.product_channelList = await this.$getDictData("product_channel");
    this.getList();
  },
  methods: {
     handleSearchList() {
      this.searchForm.pageNum = 1;
      this.$authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    // 根据名称跳转产品详情
    skip(row) {
      console.log(row);

      this.$router.push({
        path: "/productDetail",
        query: { id: row.id },
      });
    },
    handleOrder(v) {
      this.$confirm("是否推送第三方", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            id: v.id,
          };
          getkeyikeOrder(params).then((res) => {
            this.$message({
              type: "success",
              message: "推送成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推送",
          });
        });
    },
    editAccountManager(v) {
      this.$refs.editManager.opendialog(v);
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
      };
      this.searchTime = null;
      this.getList();
    },
    handleReport(v) {
      this.$nextTick(() => {
        this.$refs.stepDetail.opendialog(v);
      });
    },
    detail(v) {
      this.$refs.detail.opendialog(v);
    },
    customerMsg(v) {
      this.$refs.customerDetail.opendialog(v);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    datafun(type, val) {
      let arr = [];
      if (type === "channelId") {
        arr = this.product_channelList;
      }
      let str = [];
      val.forEach((v) => {
        arr.forEach((v1) => {
          if (v === v1.value) {
            str.push(v1.label);
          }
        });
      });
      return str.join(",");
    },
    getList() {
      let params = Object.assign({}, this.searchForm);
      // 判断完整
      if (
        (!params.creditMoneyStart && params.creditMoneyEnd) ||
        (params.creditMoneyStart && !params.creditMoneyEnd)
      ) {
        return this.$message({
          type: "error",
          message: "请选择完整的授信金额区间",
        });
      }

      if (
        (!params.loanMoneyStart && params.loanMoneyEnd) ||
        (!params.loanMoneyStart && params.loanMoneyEnd)
      ) {
        return this.$message({
          type: "error",
          message: "请选择完整的放款金额区间",
        });
      }

      //判断大小
      if (params.creditMoneyStart && params.creditMoneyEnd) {
        if (
          parseFloat(params.creditMoneyStart) >
          parseFloat(params.creditMoneyEnd)
        ) {
          return this.$message({
            type: "error",
            message: "授信金额区间错误",
          });
        } else {
          params.creditMoneyStart = params.creditMoneyStart + "00";
          params.creditMoneyEnd = params.creditMoneyEnd + "00";
        }
      }
      if (params.loanMoneyStart && params.loanMoneyEnd) {
        if (
          parseFloat(params.loanMoneyStart) > parseFloat(params.loanMoneyEnd)
        ) {
          return this.$message({
            type: "error",
            message: "放款金额区间错误",
          });
        } else {
          params.loanMoneyStart = params.loanMoneyStart + "00";
          params.loanMoneyEnd = params.loanMoneyEnd + "00";
        }
      }

      this.listLoading = true;
      getkeyikeList(params)
        .then((res) => {
          res.data.list.forEach((v) => {
            v.channelId = this.datafun("channelId", [v.channelId]);
          });
          this.tableData.list = res.data.list;
          this.tableData.total = res.data.total;

          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss"></style>
